<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>小球下落</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  const CANVAS_HEIGHT = 768;
  const CANVAS_WIDTH = 1024;
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  const BALL_VX = -2;
  let BALL_VY = 0;
  const g = 2;
  const R = 20;
  let x = 900;
  let y = 10;

  context.fillStyle = "#6EA";

  function update() {
    x += BALL_VX
    y += BALL_VY
    BALL_VY += g
    if (y + R > CANVAS_HEIGHT) {
      BALL_VY = -BALL_VY;
      BALL_VY += g * 6
      y = CANVAS_HEIGHT - R
    }
  }

  function render() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height)
    context.beginPath()
    context.arc(x, y, R, 0, Math.PI * 2)
    context.closePath()
    context.fill()
  }

  setInterval(() => {
    update()
    render()
  }, 16);
</script>
</body>
</html>
